/**
 * Created by maxiaoqiang on 2018/6/22.
 */
import React, {Component} from 'react';
import {Link} from "react-router-dom";
import {Form, Icon, Input, Button, Row, Col} from 'antd';
const FormItem = Form.Item;

import HomeLogo from "component/homeLogo";

import "./index.less";

class Forget extends Component {

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="user-div">
                <div className="form-div">
                    <HomeLogo/>
                    <Form onSubmit={this.handleSubmit}>
                        <FormItem hasFeedback>
                            {getFieldDecorator('userName', {
                                rules: [
                                    {
                                        required: true,
                                        type: 'email',
                                        message: '请输入正确的邮箱'
                                    }
                                ]
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="邮箱"
                                />
                            )}
                        </FormItem>
                        <FormItem hasFeedback>
                            <Row gutter={8}>
                                <Col span={14}>
                                    {getFieldDecorator('code', {
                                        rules: [
                                            {
                                                required: true,
                                                message: '请输入验证码'
                                            }
                                        ]
                                    })(
                                        <Input
                                            type="text"
                                            placeholder="验证码"
                                        />
                                    )}
                                </Col>
                                <Col span={6}>
                                    <Button>获取验证码</Button>
                                </Col>
                            </Row>
                        </FormItem>
                        <FormItem hasFeedback>
                            {getFieldDecorator('password', {
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入密码'
                                    }
                                ]
                            })(
                                <Input
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="密码"
                                />
                            )}
                        </FormItem>
                        <FormItem>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                                确定
                            </Button>
                            <div className="login-form-login">
                                已有账号，<Link to="/login">去登录</Link>
                            </div>
                        </FormItem>
                    </Form>
                </div>
            </div>
        )
    }

}

export default Form.create()(Forget);